import React, { useState, Component } from 'react'
import axios from 'axios';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    TouchableHighlight,
} from 'react-native';
import { router } from 'expo-router'

export default function MainPage() {
    let [user, setUser] = useState('')
    let [password, setPassword] = useState('')
    let [phone, setPhone] = useState('')
    let [sex, setSex] = useState('')
    const [errorMessage, setErrorMessage] = useState('');// 判断手机号是否正确
    const [xing,setXing] = useState('')

    let doslogin = async () => {
        const regex = /^1[3-9]\d{9}$/;
        if(sex == ''){
            setXing('性别不能为空')
        }else if (!regex.test(phone)) {
            setErrorMessage('手机号格式不正确，请输入正确的手机号码!')
        }else{

            setErrorMessage('');
            let obj = {
                user: user,
                password: password,
                phone: phone,
                sex: sex,
                image:"https://img0.baidu.com/it/u=1240274933,2284862568&fm=253&fmt=auto&app=138&f=PNG?w=180&h=180"
            }
            await axios.post(`http://192.168.13.227:3000/yjx/adduser`, obj).then(res=>{
                alert('注册成功')
                router.push('/LoginModel/login')
            })
           
        }
        
    }

    return (
        <View style={[{ backgroundColor: 'white' }]}>
            <View style={[{ backgroundColor: 'white' }, { height: 800 }, { marginTop: 100 }]}>
                <Text style={styles.titles}>账号注册</Text>
                {/* <View style={styles.container}> */}
                <View style={styles.item}>
                    <Text style={styles.textStyle}>帐号：</Text>
                    <TextInput
                        // ref={(ref) => (this.inputLoginName = ref)}
                        autoFocus={true}
                        underlineColorAndroid="gray"
                        placeholder="请输入用户名"
                        clearTextOnFocus={true}
                        clearButtonMode="while-editing"
                        style={{ flex: 1 }}
                        onChangeText={(input) => setUser(input)}
                    />
                </View>
                <View style={styles.item}>
                    <Text style={styles.textStyle}>密码：</Text>
                    <TextInput
                        // ref={(ref) => (this.inputLoginPwd = ref)}
                        underlineColorAndroid="gray"
                        placeholder="请输入密码"
                        clearTextOnFocus={true}
                        clearButtonMode="while-editing"
                        style={{ flex: 1 }}
                        onChangeText={(input) => setPassword(input)}
                    />
                </View>
                <View style={styles.item}>
                    <Text style={styles.textStyle}>电话：</Text>
                    <TextInput
                        // ref={(ref) => (this.inputLoginPwd = ref)}
                        underlineColorAndroid="gray"
                        placeholder="请输入手机号"
                        clearTextOnFocus={true}
                        clearButtonMode="while-editing"
                        style={{ flex: 1 }}
                        onChangeText={(input) => setPhone(input)}
                    />
                    
                </View>
                <View style={styles.item}>
                    <Text style={{flex: 1 }}></Text>
                    <Text style={[{flex: 4 },{marginTop:-55}]}>
                        {errorMessage && <Text style={[{color:'red'},{fontSize:11}]}>{errorMessage}</Text>}
                    </Text>
                </View>
                <View style={styles.item}>
                    <Text style={styles.textStyle}>性别：</Text>
                    <TextInput
                        // ref={(ref) => (this.inputLoginPwd = ref)}
                        underlineColorAndroid="gray"
                        placeholder="请输入男或女"
                        clearTextOnFocus={true}
                        clearButtonMode="while-editing"
                        style={{ flex: 1 }}
                        onChangeText={(input) => setSex(input)}
                    />
                </View>
                <View style={styles.item}>
                    <Text style={{flex: 1 }}></Text>
                    <Text style={[{flex: 4 },{marginTop:-55}]}>
                        {xing  && <Text style={[{color:'red'},{fontSize:11}]}>{xing}</Text>}
                    </Text>
                </View>
                <TouchableHighlight
                    style={styles.login}
                    underlayColor="transparent"
                    onPress={() => {
                        doslogin()
                    }}
                >
                    <Text style={styles.loginText}>注册</Text>
                </TouchableHighlight>
                {/* </View> */}
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    titles: {
        fontSize: 30,
        fontWeight: 'bold',
        color: '#3970a9',
        marginBottom: 30,
        textAlign: 'center',
    },
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    item: {
        flexDirection: 'row',
        alignItems: 'center',
        margin: 10,
    },
    textStyle: {
        fontSize: 18,
        color: 'black',
        marginRight: 10,
    },
    login: {
        height: 40,
        backgroundColor: 'green',
        margin: 20,
        justifyContent: 'center',
    },
    loginText: {
        fontSize: 20,
        alignSelf: 'center',
        color: '#FFF',
    },
});





